
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .tspan{
            display: inline-block;
            width: 50%;
            height: 50px;
            box-sizing: border-box;
            background-color: yellow;
            text-align: center;
            line-height: 50px;
        }
    </style>
    <link rel="stylesheet" href="mScroll.css">
</head>
<body>
<div><span class="tspan" id="a" style="border-right: 1px solid red">a</span><span class="tspan" id="b">b</span></div>
<div>
    <div id="wrapper"  class="wrapper">
        <div id="scroll" class="scroll">
            <div id="pulldown">
                <span>下拉刷新</span>
            </div>
            <ul  style="" id="dateid">
                <li>a--------------------------------------------------------------</li>
                <li>b--------------------------------------------------------------</li>
                <li>c--------------------------------------------------------------</li>
            </ul>
            <div id="pullup" style="display: none;">
                <span>上拉加载</span>
            </div>
        </div>
    </div>

    <div id="wrapper1"  class="wrapper">
        <div id="scroll1" class="scroll">
            <div id="pulldown1">
                <span>下拉刷新</span>
            </div>
            <ul  id="dateid1">
                <li>d--------------------------------------------------------------</li>
                <li>e--------------------------------------------------------------</li>
                <li>f--------------------------------------------------------------</li>
            </ul>
            <div id="pullup1" style="display: none;">
                <span>上拉加载</span>
            </div>
        </div>
    </div>

</div>
</body>
<script src="mScroll.js"></script>
<script>
    var obj={};
    obj.pulldown=function(){
        console.log('-down()');
        var li=document.createElement('li');
        li.innerText='add';
        document.getElementById('dateid').appendChild(li);
    };
    obj.pullup=function(){
        console.log('-up()');
    };
    obj.outsideid='wrapper';
    obj.insideid='scroll';
    obj.pulldownid='pulldown';
    obj.pullupid='pullup';
    myscroll(obj);

    var obj1={};
    obj1.pulldown=function(){
        console.log('-down()');
        var li=document.createElement('li');
        li.innerText='add';
        document.getElementById('dateid1').appendChild(li);
    };
    obj1.pullup=function(){
        console.log('-up()');
    };
    obj1.outsideid='wrapper1';
    obj1.insideid='scroll1';
    obj1.pulldownid='pulldown1';
    obj1.pullupid='pullup1';
    myscroll(obj1);

    document.getElementById('a').addEventListener('click',function(){
         this.style.color='red';
         document.getElementById('b').style.color='yellow';
         document.getElementById('wrapper').style.display='none';
         document.getElementById('wrapper1').style.display='block';
    },false);

    document.getElementById('b').addEventListener('click',function(){
        this.style.color='red';
        document.getElementById('a').style.color='yellow';
        document.getElementById('wrapper1').style.display='none';
        document.getElementById('wrapper').style.display='block';
    },false);
</script>
</html>